<!-- Tags -->
<template>
  <div class="tags">
    <el-tag
      v-for="(tag, index) in tags"
      :key="tag"
      :closable="tag.name !== 'home'"
      :disable-transitions="false"
      :effect="route.name === tag.name ? 'dark' : 'plain'"
      @click="changeMenu(tag)"
      @close="deleteMenu(tag, index)"
    >
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAllDataStore } from "@/stores";
const store = useAllDataStore();
const tags = computed(() => store.state.tags);
const route = useRoute();
const router = useRouter();
const changeMenu = (tag: any) => {
  router.push(tag.path);
  store.selectTag(tag);
};
const deleteMenu = (tag: any, index: number) => {
  store.updateTag(tag);

  if (tag.name !== route.name) return;

  if (index === store.state.tags.length) {
    store.selectTag(tags.value[index - 1]);
    router.push(tags.value[index - 1].name);
  } else {
    store.selectTag(tags.value[index]);
    router.push(tags.value[index].name);
  }
};
</script>

<style scoped lang="less">
.tags {
  margin: 20px 0 0 20px;
  .el-tag {
    margin-left: 10px;
  }
}
</style>
